<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>스타일 객체</title>
<script type="text/javascript">
var ctrl = {
		moveCenter: function() {
			var testDiv = document.getElementById('testDiv');
			var top, left;
			
			// ie 8 이상과 타 브라우져
			if (window.innerHeight) {
				// 브라우저 안쪽 높이의 절반
				top = window.innerHeight / 2;
				
				// 브라우저 안쪽 너비의 절반
				left = window.innerWidth / 2;
			
			// ie7 이하 브라우져에서는 innerHeight 속성이 지원되지 않음
			} else {
				// 브라우저 안쪽 높이의 절반
				top = document.documentElement.clientHeight / 2;
				
				// 브라우저 안쪽 너비의 절반
				left = document.documentElement.clientWidth / 2;
			}

			// testDiv 높이의 절반
			var height = testDiv.offsetHeight / 2;
			
			// testDiv 너비의 절반
			var width = testDiv.offsetWidth / 2;
			
			testDiv.style.top = (top - height) + 'px';
			testDiv.style.left = (left - width) + 'px';
		}
}
</script>
</head>
<body>
	<div>
		<button type="button" onclick="ctrl.moveCenter();">
				팝업된 레이어를 화면 중앙으로 배치</button>
	</div>
	<div id="testDiv" style="background-color: gray; height: 50px; 
			width: 100px; position: absolute; z-index: 1;"></div>
</body>
</html>
